<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>POST请求</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <!-- <form action="/abc"> -->
        <input type="text" name="username" class="uname">
        <input type="password" name="password" class="pwd">
        <!-- <input type="file" name="file"> -->
        <button>提交</button>
    <!-- </form> -->

    <!-- GET/POST
        + GET请求参数在地址栏显示，不安全。POST请求相对安全
        + 地址栏理论上有长度限制，GET请求理论上有参数限制  POST请求不限制长度
        + GET请求没有请求体。GET请求的参数类型只有字符串  POST可以发送不限类型的参数
        + POST 请求因为参数类型有区别：需要设置请求头 content-type 指明参数类型

    content-type:
        : plain/text  普通文本
        : application/json JSON字符串
        : application/x-www-form-urlencoded  表单数据格式：name=value&name=value...
        : application/form-data  常用于提交文件 -->

    <script type="text/javascript">
        var uname = document.querySelector(".uname"),
            pwd = document.querySelector(".pwd"),
            btn = document.querySelector("button");

        btn.onclick = function (){
            // 1. 声明实例
            var xhr = new XMLHttpRequest();
            // 2. 设置返回参数类型
            xhr.responseType = "json";
            // 3. 设置请求过程监听函数
            xhr.onreadystatechange = function (){
                // 如果请求过程完成且HTTP状态为成功
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(xhr.response);
                }
            }
            // 4. 设置请求相关内容
            xhr.open("POST", "http://bufantec.com/api/test/user/doLogin");
    
            // 请求头设置必须在 open 方法之后， send 方法之前  xhr.setRequestHeader(key,value)
            // 用户身份校验  session token
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    
            // 5. 发送请求， post请求参数写在send方法中
            xhr.send("username="+uname.value+"&password="+pwd.value);
            
        }

        
    </script>
</body>
</html>